<!-- 展示 》 图片 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="className" :style="divStyle">
      <el-image
        v-for="(url, i) in urlList"
        :key="`${i}-${url}`"
        :ref="`image${i}`"
        :src="url"
        :fit="fit"
        :preview-src-list="urlList"
        :style="imageStyle"
      />
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import FormPhoto from '../../form/FormPhoto'

const name = 'ShowImage'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: [], // 内部绑定值
      EMPTY: [], // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 填充属性
     */
    fit: FormPhoto.computed.fit,

    /**
     * 路径列表
     */
    urlList() {
      const { model, pathTrans, noTrans } = this
      if (noTrans) return model
      return model.map((url) => pathTrans(url))
    },

    /**
     * 内容样式对象
     */
    divStyle() {
      const { getSize, gap } = this
      const gapStr = getSize(gap)
      const margin = `0 -${gapStr} -${gapStr} 0`
      return { margin }
    },

    /**
     * 图片样式对象
     */
    imageStyle() {
      const { getSize, square, gap } = this
      const [w, h] = CORE.isArray(square) ? square : [square, square]
      const width = getSize(w)
      const height = getSize(h)
      const gapStr = getSize(gap)
      const margin = `0 ${gapStr} ${gapStr} 0`
      return { width, height, margin }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 预览图片 (专供外部调用)
     */
    preview(index = 0) {
      const refImage = this.$refs[`image${index}`]
      const showImage = CORE.isArray(refImage) ? (refImage || [])[0] : refImage
      if (showImage) showImage.showViewer = true
    },

    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, join, model, pathKey } = this
      const value = obj[prop]
      if (!CORE.isArray(value)) return true
      if (join) return value !== model.join()
      if (!pathKey) return value.join() !== model.join()

      const images = value.map((item) => item[pathKey])
      return images.join() !== model
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, join, pathKey, EMPTY } = this
      const value = obj[prop]
      if (join) this.model = value ? value.split(',') : []
      else if (!CORE.isArray(value)) this.model = EMPTY
      else if (!pathKey) this.model = value || EMPTY
      else this.model = value.map((item) => item[pathKey])
    },
  },
}
</script>
